<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
/*
 	neck.jsp实现的功能
 		1.排行榜，分类，电影类型点击进入相关电影列表
 		2.搜索电影，简单的模糊搜索
 
 */
$(function (){
    $("#search_input").click(function(){
        $("#search_input").val("");
    })
})
</script>
<style type="text/css">
	#neck_panel{
	    	margin-top:90px;
	    	margin-bottom:50px;
	        margin-left:auto;
	        margin-right:auto;
	        width: 1200px;
	        height: 80px;
	        background-color: white;
	        text-align: center;
	        border-radius: 5px; 
        	box-shadow:  0px 0px 5px rgba(0,0,0,0.1);
	    }
	    #neck_panel #sign{
	        float: left;
	        width: 200px;
	        height: 100%;
	        margin-right: 40px;
	        line-height: 80px;
	    }
	    #neck_panel .type{
	        float: left;
	        width: 100px;
	        height: 100%;
	        text-align: center;
	        line-height: 80px;
	    }
	    #neck_panel a:hover{
	        color: red;
	    }
	    #neck_panel #search_div{
	        float: left;
	        margin-left: 30px;
	        width: 260px;
	        height: 40px;
	        margin-top: 18px;
	        border: solid 1px #ddd;
	    }
	    #neck_panel #search_input{
	        width: 98%;
	        height: 95%;
	        border: none;
	        outline: none;
	        font-size: 10px;
	        color: darkgrey;
	    }
	    #neck_panel #submit_div{
	        float: left;
	        width: 40px;
	        height: 40px;
	        margin-top: 18px;
	        border: solid 1px #ddd;
	    }
	    #neck_panel #submit_input{
	        width: 100%;
	        height: 100%;
	        border: none;
	        background-color: white;
	        color: darkgrey;
	    }
	    #neck_panel a{
	        text-decoration: none;
	        color: black;
	        font-size: 20px; 
	    }
	    #neck_panel #sign img{
	    	height: 100%;
	    }
</style>
</head>
<body>
<div id="neck_panel">
            <div id="sign"><img src="/movies/images/logo.png"></div>
            <div class="type"><a href="/movies/SearchServlet?action=doSearchMore&key=rank&currentPager=1">排行榜</a></div>
            <div class="type"><a href="/movies/TagServlet?action=tagsearch">分类</a></div>
            <div class="type"><a href="/movies/SearchServlet?action=doSearchByType&key=1&currentPager=1">动作片</a></div>
            <div class="type"><a href="/movies/SearchServlet?action=doSearchByType&key=2&currentPager=1">悬疑片</a></div>
            <div class="type"><a href="/movies/SearchServlet?action=doSearchByType&key=8&currentPager=1">爱情片</a></div>
            <div class="type"><a href="/movies/SearchServlet?action=doSearchByType&key=4&currentPager=1">科幻片</a></div>
            <form method="post" action="/movies/SearchServlet?action=doSearch">
                <div id="search_div">
                    <input type="text" id="search_input" name="search_text" value="搜索电影、导演、演员"> 
                </div>
                <div id="submit_div">
                    <input type="submit" id="submit_input" name="search_submit" value="🔍">
                </div>
            </form>
       
        
        </div>
</body>
</html>